import React, { Component, PropTypes } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import store from '../../store';

class DeleteFolder extends Component{

    closeFrame(){
        store.dispatch({
            type: 'DELETE_FOLDER',
            deleteFolder: false
        });
        $('.backcover').hide();
    }

    delete(e){
        var { activeFolder, folderList } = this.props;
        var _index = -1
        var _state = [];
        var _that = this;
        for(var [index, value] of folderList.entries()){
            if(value.name === activeFolder)
            continue;
            _state.push(value);
        }

        axios.get('/deleteFolder',{
            params: {
                name: activeFolder
            }
        })
        .then(function(response){

            if( activeFolder === $('#folder-list .active span').html()){
                store.dispatch({
                    type: 'GET_PREVIEW',
                    previewList: []
                })
            }

            store.dispatch({
                type: 'GET_FOLDER',
                folderList: _state
            })
            

            _that.closeFrame()
        })
        .catch(function(error){
            alert('系统出错')
        })
    
        


    }

    render(){

        var { deleteFolder, activeFolder } = this.props;
        var classs = 'new-container hide';
        if (deleteFolder) classs = 'new-container'

       return(
            <section id="delete-folder" className={classs}>
                <div  className="new-title">
                    文件夹删除
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div>
                    确定删除
                    <span className="warn">{activeFolder}</span>
                    文件夹并清空内容吗？
                </div>
                <div>
                    <button type="button" className="cancle-btn" onClick={this.closeFrame.bind(this)}>取消</button>
                    <button type="button" className="delete-btn" onClick={this.delete.bind(this)}>删除</button>
                </div>
            </section>
       )
    }

}


const mapStateToProps  = (state) => {
    return {
        folderList: state.folderReducer.folderList,
        activeFolder: state.folderReducer.activeFolder,
        deleteFolder: state.folderReducer.deleteFolder
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(DeleteFolder);